/**
 * @Author: Your name
 * @Date:   2021-04-16 22:24:32
 * @Last Modified by:   Your name
 * @Last Modified time: 2021-04-19 14:11:35
 */
<template>
  <div id="app">
    <div class="buyticket">
      <!--页面位置-->
      <div class="bread-wrapper">
        <span>
          <a href="//www.bilibili.com">Bilibili</a>
        </span>
        <span class="symbol">&gt;</span>
        <span>
          <a href="../Home/index.vue">会员购</a>
        </span>
        <span class="symbol">&gt;</span>
        <span class="project-name">北京·随意听风阁 国风集市</span>
      </div>
      <!--页面位置-->

      <!--主要内容-->
      <div class="whole-detail-info-wrapper">
        <div
          class="detail-img-icon no_pic"
          :style="
            `background-image: url(/images/index/${index+1}.jpeg);`
          "
        ></div>
        <div class="detail-info-wrapper">
          <div class="product-info-name">{{ detaillist.name }}</div>
          <div class="product-info-time-wrapper">
            <div class="product-info-time-title">时间：</div>
            <div class="product-info-time">{{ detaillist.project_label }}</div>
          </div>
          <div class="vuene-wrapper">
            <div class="title">场馆：</div>
            <div class="vuene-info-content">
              <div class="vuene-name">
                {{
                  detaillist.venue_info?
                  detaillist.venue_info.city_name +
                  detaillist.venue_info.district_name +
                  detaillist.venue_info.name:''
                }}
              </div>
              <div class="address-name">
                {{ detaillist.venue_info?detaillist.venue_info.address_detail:'' }}
              </div>
              <div class="address-icon fa fa-map-marker"></div>
              <div class="check-map">查看地图</div>
            </div>
          </div>
          <div class="login-show-wrapper">
            <ul class="clearfix mr4">
              <li class="title">场次：</li>
              <li class="screens">
                <div class="selectable-option active">6月22日-6月23日</div>
              </li>
            </ul>
            <ul class="clearfix">
              <li class="title">价格：</li>
              <li class="tickets">
                <div
                  class="selectable-option"
                  :class="css.active ? 'active' : ''"
                  @click="changeActive"
                >
                  {{ `¥${detaillist.price_low / 100}(单日早鸟票)` }}
                </div>
                <div
                  class="selectable-option"
                  :class="css.active ? '' : 'active'"
                  @click="changeActive"
                >
                  {{ `¥${detaillist.price_high / 100}(单日预售票)` }}
                </div>
              </li>
            </ul>
            <ul class="clearfix">
              <li class="title">数量：</li>
              <li class="num-content">
                <div class="ticket-count">
                  <div class="count-reduce active"
                  @click="changeNum(number, -1)" >-</div>
                  <input class="count-number " style="border:none "  :value="number" >
                  <div class="count-plus active"
                  @click="changeNum1(number, 1)">+</div>
                </div>
              </li>
            </ul>
            <div class="product-buy-wrapper">
              <router-link
                :to="{ path: '/platform', query: { id, index,number } }"
                class="product-buy enable"
              >
                <div>立即购票</div>
              </router-link>
              <router-link to="/order" class="product-buy enable">
                <div>加入购物车</div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <!--主要内容 end-->
      <!-- 详情内容start -->
    </div>
    <div class="detail-of-the-event">
      <div class="tabs">
        <div class="tabs-item">活动详情</div>
      </div>
    </div>
    <div class="details-introduction">
      <div class="basic-information">
        <div class="activity-info-wrapper ticket-system-container">
          <div class="activity-info scroll-wrapper">
            <div class="activity-info-header">
              <div class="icon icon-activity"></div>
              <div class="guest-title">活动详情</div>
            </div>
            <div class="activity-info-body">
              <div>
                <div>
                  <div class="info-header">
                    <span>基础信息</span>
                  </div>
                  <div class="info-body">
                    <ul>
                      <li>
                        <div>活动日期</div>
                        <div>2019/6/22-23 10：00-17：00</div>
                      </li>
                      <li>
                        <div>场馆地址</div>
                        <div>
                          北京市朝阳区 东郎电影创意产业园 东郎电影创意产业园
                        </div>
                      </li>
                      <li>
                        <div>儿童说明</div>
                        <div>1.2米以下儿童能够入场，需持全价票入场</div>
                      </li>
                      <li>
                        <div>入场次数</div>
                        <div>单场票（ 单日单场次1次入场有效）</div>
                      </li>
                      <li>
                        <div>入场说明</div>
                        <div>
                          电子票，凭购票二维码扫码验证入场（订单或截图无效）
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <div class="info-header">
                    <span>活动介绍</span>
                  </div>
                  <div class="info-body">
                    <div class="info-content">
                      <p>
                        <img
                          src="//i0.hdslb.com/bfs/openplatform/201906/imSmMLgTSJcnE.jpeg"
                        />
                      </p>
                      <p>
                        <img
                          src="//i2.hdslb.com/bfs/openplatform/201905/im3USnBb5ebLw.jpeg"
                        />
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ticket-information">
        <div class="ticket-tips-wrapper">
          <div class="ticket-tips">
            <div class="ticket-tips-header"><span></span>购票须知</div>
            <div class="ticket-tips-content">
              <p>1、会员购在线售票为电子票或纸质票。</p>
              <p>
                2、如您购买的是电子票，入场时请在bilibili
                APP中【订单中心】打开电子票检票入场
                <strong>（部分活动需兑换实体票入场）；电子票不得转售，</strong
                >请在正规途径购买；
                <strong>电子票截图无法入场。</strong>
              </p>
              <p>
                3、如您购买的是纸质票，
                <strong>需在购票时填写准确配送信息，</strong
                >纸质票将在活动开始之前寄出，邮费由用户承担；因纸质票的特殊性，
                <strong>遗失不补且无法挂失，</strong>请您保管好购买到的票品。
              </p>
              <p>4、部分活动不提供现场售票服务，请您提前购买。</p>
              <p>
                5、因票品具有稀缺性和时效性的特点，一旦退货将会影响二次销售，
                <strong>票品均不支持七天无理由退票，</strong
                >请您理解并审慎购买，
                <strong>并非所有项目主办方都支持因个人原因发起的退票，</strong
                >具体请以各商品展示页说明信息为准，请您在购买前仔细阅读商品信息。
              </p>
              <p>
                6、
                <strong
                  >若所购项目主办方支持因个人原因退票，您在因个人原因退票时需支付一定比例的手续费,</strong
                >具体比例您可在 <span>《bilibili购票服务协议》</span>中查询。
              </p>
              <p>
                7、为保障您的人身安全，主办方在人流高峰可能会采取临时现场限流措施，如对您的正常观展产生影响，敬请谅解。
              </p>
              <p>
                8、若有其他问题请联系客服：客服入口在移动端APP “我的”
                个人中心，点击“我的客服”，选择“在线客服”，即可咨询。
              </p>
              <p>
                9、
                <span>《会员购服务协议》</span>
              </p>
            </div>
          </div>
          <div class="merchant-section">
            <div class="merchant-header"><span></span>主办方信息</div>
            <div class="baseinfo-wrapper">
              <div class="content-item">
                <div class="title">主办名称</div>
                <div class="content">北京荣耀次元文化传播有限公司</div>
              </div>
              <div class="content-item">
                <div class="title">
                  营业执照
                  <div class="fold-btn">
                    <span class="text">查看图片</span>
                    <i class="fold-btn-icon open"></i>
                  </div>
                </div>
                <div class="content" style="display: none">
                  <img
                    src="//i2.hdslb.com/bfs/ticket-sales/201812/WechatIMG85263095340.jpeg?token=dae2179249bb4173%3Ajvlx%2FJ%2FZxmQ3VVDQadw%2FYJ8s1xM%3D%3A1618640340"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="merchant-section">
            <div class="baseinfo-wrapper">
              <div class="content-item notitle">
                <div class="title">联系我们</div>
                <div class="content">
                  如果您有合作意向请与我们联系:
                  <br />kfbd@bilibili.com
                </div>
              </div>
            </div>
          </div>
          <div class="rec-list-wrapper">
            <div class="rec-list"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Detail",

  data() {
    return {
      id: this.$route.query.id,
      index: this.$route.query.index*1,
      css: {
        active: true,
      },
        number:1


      // project_name: "哈尔滨·shining Heart动漫游戏嘉年华-初夏祭",
      // project_type: "漫展",
      // rank_index: 0,
      // rank_offset: 1,
      // remind_status: false,
      // required_number: 1677,
      // sale_end_time: 1619937000,
      // sale_flag: "预售中",
      // sale_flag_number: 2,
      // sale_point: "",
      // sale_start_time: 1614143063,/.
      // show_remind_btn: false,
      // show_time: "2021.05.01",
      // start_time: "2021.05.01",
      // start_unix: 1619832600,
      // tags: [],
      // tlabel: "2021.05.01 09:30 - 05.02 16:30",
      // type: "ticket",
      // url: "https://show.bilibili.com/platform/detail.html?id=37724&msource=Msearch_colligation",
      // venue_id: "12888",
      // venue_name: "哈尔滨国际会展中心",
      // address_detail: "红旗大街301号",
      // wish: "1677"
    };
  },
  mounted() {
    // console.log(this.id * 1);
    this.getdetaillist(this.id * 1);
  },
  methods: {
    getdetaillist(id) {
      this.$store.dispatch("detaillist", id);
    },
    changeActive() {
      this.css.active = !this.css.active;
      
    },
    changeNum(number, type) {
      console.log(number)
      if(number-1<=0){
        this.number =1
      }else{ 
        let numbers=number +type
        this.number=numbers
    }
    },
    changeNum1(number,type){
      let numbers=number +type
        this.number=numbers
    }
       
  },
  computed: {
    ...mapGetters(["detaillist"]),
    
  },
};
</script>

<style scoped>
html {
  background: #fff;
}
/* 顶部 */

/* 页面位置 */
.buyticket {
  background: #fff;
  width: 100%;
  padding-bottom: 58px;
}

.bread-wrapper {
  width: 1160px;
  margin: auto;
  padding: 10px;
  display: flex;
  align-items: center;
}

.bread-wrapper span {
  color: #000;
  font-size: 12px;
  margin-right: 5px;
}

.bread-wrapper span.symbol {
  margin-bottom: 1px;
}

.bread-wrapper .project-name {
  color: #99a2aa;
}

.bread-wrapper a {
  color: #222;
  text-decoration: none;
}

/* 主要内容 */
.whole-detail-info-wrapper {
  background: #fff;
  width: 1160px;
  margin: auto;
  display: -ms-flexbox;
  display: flex;
}

.whole-detail-info-wrapper .detail-img-icon {
  margin-right: 20px;
  width: 300px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.whole-detail-info-wrapper .detail-info-wrapper .product-info-name {
  font-size: 18px;
}

.product-info-time-wrapper {
  margin-top: 30px;
  display: flex;
  align-items: center;
}

.product-info-time-wrapper .product-info-time-title {
  font-size: 14px;
  color: #99a2aa;
  line-height: 14px;
  margin-right: 15px;
}

.product-info-time-wrapper .product-info-time {
  font-size: 14px;
  color: #222;
  line-height: 14px;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper {
  padding-bottom: 8px;
  margin-top: 10px;
  align-items: center;
  display: flex;
  border-bottom: 1px dashed #e7ecf1;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .title {
  line-height: 38px;
  font-size: 14px;
  color: #99a2aa;
  margin-right: 15px;
}

.whole-detail-info-wrapper
  .detail-info-wrapper
  .vuene-wrapper
  .vuene-info-content {
  display: flex;
  align-items: center;
}

.whole-detail-info-wrapper
  .detail-info-wrapper
  .vuene-wrapper
  .vuene-info-content
  .vuene-name {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 430px;
}

.whole-detail-info-wrapper
  .detail-info-wrapper
  .vuene-wrapper
  .vuene-info-content
  .address-name {
  margin-right: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 10px;
  font-size: 12px;
  color: #99a2aa;
  line-height: 14px;
  max-width: 250px;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .address-icon {
  margin-left: 15px;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .check-map {
  cursor: pointer;
  font-size: 12px;
  color: #6d757a;
  line-height: 14px;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix.mr4 {
  margin-top: 14px;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix {
  display: flex;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix .title {
  line-height: 38px;
  font-size: 14px;
  color: #99a2aa;
  margin-right: 15px;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix .screens,
.whole-detail-info-wrapper .detail-info-wrapper .clearfix .tickets {
  flex: 1;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix {
  margin-top: 10px;
  display: flex;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix .tickets {
  -ms-flex: 1;
  flex: 1;
}

.selectable-option.active {
  height: 38px;
  line-height: 38px;
  color: #f25d8e;
  border: 1px solid #f25d8e;
  box-shadow: inset 0 0 0 1px #f25d8e;
}

.selectable-option {
  display: inline-block;
  position: relative;
  height: 38px;
  line-height: 38px;
  text-align: center;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 0 30px;
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  user-select: none;
  cursor: pointer;
  font-size: 12px;
}

.selectable-option.active:after {
  position: absolute;
  content: "";
  font-size: 0;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
  border-style: solid;
  border-width: 0 0 18px 18px;
  border-color: transparent transparent #f25d8e;
}

.selectable-option.active:before {
  display: inline-block;
  position: absolute;
  content: "";
  font-size: 0;
  line-height: 0;
  width: 6px;
  height: 4px;
  right: 1px;
  bottom: 3px;
  border: 1px solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-43deg);
  z-index: 10;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix {
  margin-top: 10px;
  display: flex;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix .num-content {
  display: flex;
}

.ticket-count {
  display: flex;
  align-items: center;
  height: 38px;
  border-radius: 3px;
  border: 1px solid #ccd0d7;
  width: 158px;
  line-height: 38px;
}

.ticket-count .count-reduce {
  margin-left: 13px;
  width: 14px;
  height: 38px;
  font-size: 38px;
  line-height: 34px;
  color: #ccd0d7;
  border-top-left-radius: 0.133rem;
  border-bottom-left-radius: 0.133rem;
}

.ticket-count .count-reduce.active,
.ticket-count .count-plus.active {
  color: #f25d8e;
}

.ticket-count .count-number {
  flex: 1;
  width: 1.44rem;
  height: 1.013rem;
  line-height: 1.013rem;
  left: 1.013rem;
  text-align: center;
}

.ticket-count .count-plus {
  margin-right: 13px;
  position: relative;
  right: 0;
  border-top-right-radius: 0.133rem;
  border-bottom-right-radius: 0.133rem;
  width: 14px;
  height: 38px;
  font-size: 26px;
  line-height: 38px;
  color: #ccd0d7;
}

.whole-detail-info-wrapper .product-buy-wrapper {
  margin-left: 57px;
  margin-top: 30px;
  display: flex;
}

.buyticket .product-buy.enable {
  color: #fff;
  background-image: linear-gradient(-48deg, #ff6a9c, #fe8574);
  box-shadow: 0 3px 4px 0 #fdb8cc;
}

.buyticket .product-buy {
  width: 240px;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border-radius: 3px;
  cursor: pointer;
  background: #e4eaef;
  color: #99a2aa;
  margin-right: 20px;
}
/* 主要内容 end */
/* 详情内容start */
.detail-of-the-event {
  width: 1160px;
  margin: 20px auto;
  height: 50px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
  border-radius: 4px;
}
.detail-of-the-event .tabs {
  display: flex;
  margin-top: 20px;
  line-height: 50px;
}
.detail-of-the-event .tabs .tabs-item {
  position: relative;
  cursor: pointer;
  font-size: 14px;
  width: 140px;
  text-align: center;
}
.detail-of-the-event .tabs .tabs-item:before {
  left: 50%;
  transform: translate(-50%);
  position: absolute;
  content: "";
  top: 45px;
  width: 30px;
  height: 3px;
  background: #f25c8e;
  border-radius: 4px;
}
.details-introduction {
  display: flex;
  width: 1160px;
  margin: 0 auto;
}
.details-introduction .basic-information {
  width: 850px;
  box-sizing: border-box;
}
.details-introduction .basic-information .ticket-system-container {
  width: 1160px;
  margin: 0 auto;
}
.details-introduction
  .basic-information
  .ticket-system-container
  .activity-info {
  line-height: 20px;
  font-size: 14px;
  overflow: hidden;
  background: #fff;
  cursor: auto;
  display: inline-block;
  width: 850px;
  padding: 20px;
  margin-top: 10px;
  border: 1px solid #e7ecf1;
  border-radius: 4px;
  box-sizing: border-box;
}
.details-introduction
  .basic-information
  .ticket-system-container
  .activity-info
  .activity-info-header {
  display: flex;
  font-size: 16px;
  color: #212121;
  line-height: 16px;
}
.activity-info .icon-activity {
  margin-right: 10px;
  width: 18px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url();
  background-size: 100% 100%;
}
.activity-info-body .info-header {
  background-color: #f4f4f4;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 30px;
}
.activity-info-body .info-header span {
  font-size: 16px;
  color: #212121;
  margin-left: 10px;
  font-weight: 700;
}
.activity-info-body .info-body {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 10px;
}
.activity-info-body .info-body ul {
  display: block;
}
.ticket-tips-wrapper .ticket-tips {
  margin-bottom: 10px;
  border: 1px solid #e7ecf1;
  border-radius: 4px;
  padding: 0 20px;
  background: #fff;
}
.ticket-tips-wrapper .ticket-tips-header {
  padding: 20px 0;
  font-size: 16px;
  color: #212121;
  line-height: 16px;
}
.ticket-tips-wrapper .ticket-tips-header span {
  vertical-align: top;
  margin-right: 10px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  background-image: url();
}
.ticket-tips-wrapper .ticket-tips-content {
  padding-bottom: 20px;
  line-height: 20px;
}
.ticket-tips-wrapper .ticket-tips-content p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 12px;
}
.ticket-tips-wrapper .merchant-section {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px;
}
.ticket-tips-wrapper .merchant-section .merchant-header {
  font-size: 16px;
  color: #212121;
  line-height: 16px;
}
.ticket-tips-wrapper .merchant-section .merchant-header span {
  vertical-align: top;
  margin-right: 10px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  background-image: url();
}
.ticket-tips-wrapper .merchant-section .baseinfo-wrapper {
  width: 100%;
}
.ticket-tips-wrapper .merchant-section .baseinfo-wrapper .content-item {
  margin-top: 16px;
}
.ticket-tips-wrapper .merchant-section .baseinfo-wrapper .content-item .title {
  background-color: #f4f4f4;
  font-size: 12px;
  padding: 0 10px;
  font-weight: 700;
  height: 30px;
  line-height: 30px;
  position: relative;
}
.ticket-tips-wrapper
  .merchant-section
  .baseinfo-wrapper
  .content-item
  .content {
  font-size: 12px;
  color: #212121;
  line-height: 18px;
  margin-top: 10px;
}
.ticket-tips-wrapper
  .merchant-section
  .baseinfo-wrapper
  .content-item
  .title
  .fold-btn {
  position: absolute;
  display: flex;
  align-items: center;
  color: #999;
  bottom: 0;
  right: 4px;
  font-weight: 400;
}
.ticket-tips-wrapper
  .merchant-section
  .baseinfo-wrapper
  .content-item
  .title
  .fold-btn
  .close {
  background-image: url();
}
.ticket-tips-wrapper
  .merchant-section
  .baseinfo-wrapper
  .content-item
  .title
  .fold-btn
  .open {
  background-image: url();
}
</style>
